<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>task4</title>
	<style type="text/css">
	.container{
		width: 90%;
		height:500px;
		border: 1px solid;
		border-color: #ccc;
		position: relative;
	}
	.rectangle{
		width: 400px;
		height: 200px;
		background-color: #ccc;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -100px;
		margin-left: -200px;
	}
	.quadrant1{
		position: absolute;
		background-color: #fc0;
		width: 50px;
		height: 50px;
		-webkit-border-radius: 0px 0px 50px 0px;
		top: 0px;
		left: 0px;
	}
	.quadrant2{
		position: absolute;
		background-color: #fc0;
		width: 50px;
		height: 50px;
		border-radius: 50px 0px 0px 0px;
		bottom: 0px;
		right: 0px;
	}
	</style>
</head>
<body>
	<div class="container">
		<div class="rectangle">
			<div class="quadrant1"></div>
			<div class="quadrant2"></div>
		</div>
	</div><!-- container -->

</body>
</html>